<template>
  <div class="homelist">
    <div>
      <ListRated />
      <!-- 自定义事件的方式 -->
      <ListMovies @addbs="fn" ref="listmovies" @finish="finish" />
      <p v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>

<script>
import ListRated from "./ListRated.vue";
import ListMovies from "./ListMovies.vue";
import BetterScroll from "better-scroll";
// 添加时机

let bs;

export default {
  data() {
    return {
      noMore: false,
    };
  },
  components: {
    ListRated,
    ListMovies,
  },
  methods: {
    fn() {
      // console.log("数据请求结束了");
      bs = new BetterScroll(".homelist", {
        scrollX: false,
        scrollY: true,
        // 保证元素可以被点击
        click: true,
        // 表示我们可以使用上拉加载了
        // pullUpLoad: true,
        pullUpLoad: {
          // 阈值
          // 离最下面还有100px的时候，就可以触发pullingUp事件
          threshold: 100,
        },
      });

      // 监听到拉到底的事件
      // 默认情况下只能触发一次触底事件，需要手动地开启下一次的触底事件 bs.finishPullUp()
      // 如果不关闭，数据请求比较慢，会一直触发
      bs.on("pullingUp", () => {
        console.log("已经拉到底了");
        // 触底的事件是在父组件的，请求要在子组件做
        this.$refs.listmovies.addMore();
      });
    },
    finish(done) {
      // 表示的是子组件的加载更多结束了
      // 重新计算子元素高度
      bs.refresh();
      if (!done) {
        bs.finishPullUp();
      } else {
        this.noMore = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.homelist {
  position: fixed;
  top: 154px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>
